@use '~material-theme' as c;

.container {
  padding: 0;
  background-color: c.mat-color(c.$background, app-bar);
  border: 1px solid c.mat-color(c.$foreground, divider-light);
  border-radius: 8px;

  .header-wrapper {
    :hover {
      background-color: #f0f0f0;
    }

    .header {
      padding: 24px;
      display: flex;

      .flow-header {
        flex-grow: 1;

        .flow-title {
          font-family: c.$google-sans-display-family;
          font-size: 115%;
          font-weight: 500;
          color: #6d6d6d;
        }

        .flow-info {
          display: flex;
          align-items: center;

          margin-top: .85em;
          font-size: 85%;
          color: #8c8c8c;

          .user-icon {
            vertical-align: middle;
          }

          .user-name {
            padding-left: .4em;
          }

          .start-time {
            padding-left: 1em;
            color: #8c8c8c;
          }
        }
      }

      .menu-button {
        position: relative;
        top: -15px;
        left: 20px;

        .menu-icon {
          opacity: .2;
          font-size: 250%;
          position: relative;
          left: -5.5px;
        }
      }
    }
  }
}
